<script>
import { poleTypeArray } from '@/const'
import { mapState } from 'vuex'

export default {
  name: 'poleForm',
  props: {
    edit: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      /* 表单数据对象 */
      formData: {
        poleName: '',
        poleNumber: '',
        poleIp: '',
        areaId: '',
        poleType: ''
      },
      poleTypeArray,
      /* 表单规则对象 */
      formRules: {
        poleName: [
          { required: true, message: '请输入一体杆名称', trigger: 'blur' }
        ],
        poleNumber: [
          { required: true, message: '请输入一体杆编号', trigger: 'blur' }
        ],
        poleIp: [
          { required: true, message: '请输入一体杆IP', trigger: 'blur' }
        ],
        areaId: [
          { required: true, message: '请选择关联区域', trigger: 'change' }
        ],
        poleType: [
          { required: true, message: '请选择一体杆类型', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapState('manageStore', ['propList'])
  },
  methods: {
    /* 获取一体杆关联区域的列表回调函数 */
    async fetchDropList() {
      try {
        await this.$store.dispatch('manageStore/fetchDropList')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 添加一体杆的回调函数 */
    async addPole() {
      try {
        const addResult = await this.$store.dispatch('manageStore/addPole', this.formData)
        this.$message.success(addResult)
        this.$emit('success')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 编辑一体杆的回调函数 */
    async updatePole() {
      try {
        delete this.formData.areaName
        delete this.formData.poleStatus
        const updateResult = await this.$store.dispatch('manageStore/updatePole', this.formData)
        this.$message.success(updateResult)
        this.$emit('success')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    findPole(row) {
      this.formData = { ...row }
    },
    /* 点击确定按钮的回调函数 */
    async handleSubmit() {
      const valid = await this.$refs.formRef.validate().catch(error => error)
      if (!valid) return
      if (this.edit) {
        await this.updatePole()
      } else {
        await this.addPole()
      }
    },
    resetForm(){
      this.$refs.formRef.resetFields()
    }
  },
  emits: ['success'],
  mounted() {
    this.fetchDropList()
  }
}
</script>

<template>
  <el-form label-width="100px" :model="formData" :rules="formRules" ref="formRef">
    <el-form-item label="一体杆名称" prop="poleName">
      <el-input size="small" placeholder="请输入一体杆名称" v-model="formData.poleName"></el-input>
    </el-form-item>
    <el-form-item label="一体杆编号" prop="poleNumber">
      <el-input size="small" placeholder="请输入一体杆编号" v-model="formData.poleNumber"></el-input>
    </el-form-item>
    <el-form-item label="一体杆IP" prop="poleIp">
      <el-input size="small" placeholder="请输入一体杆IP" v-model="formData.poleIp"></el-input>
    </el-form-item>
    <el-form-item label="一体杆类型" prop="poleType">
      <el-select size="small" v-model="formData.poleType" placeholder="请选择一体杆类型">
        <el-option v-for="(item) in poleTypeArray" :value="item.value" :label="item.label" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="关联区域" prop="areaId">
      <el-select size="small" v-model="formData.areaId" placeholder="请选择关联区域">
        <el-option v-for="(item) in propList" :value="item.areaId" :label="item.areaName" :key="item.areaId"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button size="small">取消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确认</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.el-form {
  width: 80%;

  .el-select {
    width: 100%;
  }
}
</style>
